<template>
    <transition name="slider">
        <div class="notice-detail">
            <m-header :canreturn=true :type="1" :titleText=titleText></m-header>
            <div class="newsbox" v-if="articleInfo" ref="newsbox">
                <scroll class="notice-wrapper" :listenScroll=true>
                    <div>
                        <h3>{{articleInfo.title}}</h3>
                        <p class="newsdate">发布时间:{{articleInfo.created_at}}</p>
                        <div class="newbody" v-html="articleInfo.content">
                        </div>
                    </div>
                </scroll>
            </div>
            <div class="loading-container " v-show="!articleInfo">
                <loading></loading>
            </div>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
import Scroll from '@/base/scroll/scroll';
import MHeader from 'components/m-header/m-header';
import Loading from '@/base/loading/loading';
import { getCommonInfo } from '@/base/api/indexpage/getindexinfo';
import { mapGetters } from 'vuex';

export default {
    data() {
        return {
            titleText: '新闻详情',
            articleInfo: {},
        };
    },
    created() {
        this.id = this.$route.params.newsId;
        this._getCommonInfo();
    },
    mounted() {
        this.$refs.newsbox.style.top = (44 + parseInt(this.statusbar)) + 'px';
    },

    methods: {
        _getCommonInfo() {
            const address = `/article/detail/${this.id}`;
            getCommonInfo(address).then((res) => {
                console.log(res);
                this.articleInfo = res.articleInfo;
                this.articleInfo.created_at = this.articleInfo.created_at.substr(0, 10);
            });
        },
    },
    computed: {
        ...mapGetters(['statusbar']),
    },

    components: {
        MHeader,
        Scroll,
        Loading,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

slider();

.notice-detail {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background: $color-background;
    background: #ffffff;

    .newsbox {
        position: absolute;
        top: 44px;
        bottom: 0;
        width: 100%;

        .notice-wrapper {
            height: 100%;
            overflow: hidden;
            padding: 15px;
            color: #222222;

            h3 {
                font-size: $font-size-medium-x;
                text-align: center;
                font-weight: bold;
            }

            .newsdate {
                text-align: center;
                font-size: $font-size-medium;
                padding: 10px 0 20px 0;
            }

            .newbody {
                font-size: $font-size-medium;
                text-indent: 28px;
                line-height: 20px;
                padding-bottom: 60px;
                overflow: hidden;

                img {
                    display: block !important;
                    max-width: 100% !important;
                    padding: 14px 0 !important;
                    margin: 0 auto !important;
                }
            }
        }
    }

    .loading-container {
        loading();
    }
}
</style>
